<template>
	<div>
		<!-- IndexDest区域 -->
		<div class="dest" >
			<div class="dest_Top" >
				<h3>当季目的地</h3>
				<h4>你朋友圈的旅行内容,我们包了</h4>
				<span>更多></span>
			</div>
			<div class="dest_middle">
				<ul>
					<li v-for="item in tabs" :key="item.id" :class="{ 'default' : iscur===item.id }" @click="iscur = item.id" >
						{{item.name}}
						<span class="default-span" ></span>
					</li>
					<!-- <li class="default">国内</li>
					<li>出境</li> -->
				</ul>
			</div>
			<div class="dest_bottom">
				<ul>
					<template v-for="item in newsList1">
						<li  v-if="item.bol == iscur" :key="item.id" :style="'background-image:url('+item.src+')'"  >
							<p>{{item.name1}}</p>
							<p>{{item.name2}}</p>
						</li>
					</template>
					<template v-for="item in newsList2">
						<li  v-if="item.bol == iscur" :key="item.id" :style="'background-image:url('+item.src+')'"  >
							<p>{{item.name1}}</p>
							<p>{{item.name2}}</p>
						</li>
					</template>
				</ul>
				<ol v-if="iscur == 1">
					<li v-for="item in newList3" :key="item.id">{{item.address}}<span>{{item.txt}}</span></li>
				</ol>
				<ol v-if="iscur == 2">
					<li v-for="item in newList4" :key="item.id">{{item.address}}<span>{{item.txt}}</span></li>
				</ol>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		name : 'IndexDest',
		data(){
			return {
				tabs : [
					{ id : 1 , name : '国内' },
					{ id : 2 , name : '出境' }
				],
				iscur : 1,
				newsList1 : [
					{ id : 1 , src : require('@/assets/img/destImg/1.jpg') , name1 : '牛背山' , name2 : '王者归来' , bol : 1 },
					{ id : 2 , src : require('@/assets/img/destImg/2.jpg') , name1 : '西双版纳' , name2 : '高铁开通' , bol : 1 },
					{ id : 3 , src : require('@/assets/img/destImg/3.jpg') , name1 : '九寨沟' , name2 : '冰雪仙境' , bol : 1 },
				],
				newsList2 : [
					{ id : 1 , src : require('@/assets/img/destImg/4.jpg') , name1 : '克罗地亚' , name2 : '君临之城' , bol : 2 },
					{ id : 2 , src : require('@/assets/img/destImg/5.png') , name1 : '槟城' , name2 : '风味南洋' , bol : 2 },
					{ id : 3 , src : require('@/assets/img/destImg/6.jpg') , name1 : '纳米比亚' , name2 : '狂野非洲' , bol : 2 },
				],
				newList3 : [
					{ id : 1 , address : '长白山' , txt : '冰封天地' },
					{ id : 2 , address : '潮汕' , txt : '' },
					{ id : 3 , address : '林芝' , txt : '' },
					{ id : 4 , address : '怒江' , txt : '' },
					{ id : 5 , address : '四姑娘山' , txt : '跨年登高' },
					{ id : 6 , address : '泉州' , txt : '' }
				],
				newList4 : [
					{ id : 1 , address : '新加坡' , txt : '花园城市' },
					{ id : 2 , address : '格鲁吉亚' , txt : '' },
					{ id : 3 , address : '缅甸' , txt : '' },
					{ id : 4 , address : '墨西哥' , txt : '' },
					{ id : 5 , address : '吴哥迷城' , txt : '高棉的微笑' },
					{ id : 6 , address : '古巴' , txt : '小众社会主义风情' }
				]
			}
		},
	}
</script>

<style scoped>
	.dest{
		width: 95%;
		/* height: 8.72rem; */
		height: 10.4rem;
		margin: 0 auto;
		/* border: 1px solid #000000; */
		/* background-color: #D4D4D4; */
		/* background-color: #F6D83F; */
		margin-top: 0.5rem;
		margin-bottom: 0.5rem;
		border-radius: 0.3rem;
		border-radius: 0.6rem;
	}
	.dest .dest_Top{
		width: 100%;
		height: 1.86rem;
		background-color: white;
	}
	.dest .dest_Top h3{
		font-size: 0.5rem;
		line-height: 1.86rem;
		font-weight: bold;
		display: flex;
		float: left;
		/* margin-left: 0.4rem; */
		/* margin-right: 0.11rem; */
	}
	.dest .dest_Top h4{
		/* width: 36%; */
		/* padding-left: 0.25rem; */
		padding-right: 0.25rem;
		height: 0.8rem;
		font-size: 0.35rem;
		line-height: 0.8rem;
		text-align: center;
		/* margin-left: 0.5rem; */
		margin-top: 0.55rem;
		float: left;
		margin-left: 0.4rem;
		color: #ff9e51;
		background-color: #fff3ea;
		border-radius: 0.2rem;
	}
	.dest .dest_Top span{
		width: 15%;
		text-align: center;
		font-size: 0.4rem;
		line-height: 1.86rem;
		float: right;
	}
	.dest .dest_middle{
		width: 100%;
		height: 50px;
	}
	.dest .dest_middle ul{
		width: 100%;
		height: 100%;
	}
	.dest .dest_middle ul li{
		width: 30%;
		height: 100%;
		line-height: 50px;
		font-weight: bold;
		text-align: center;
		font-size: 0.45rem;
		border-radius: 25px;
		border: 0;
		border: 1px solid #D4D4D4;
		margin-left: 2%;
		cursor: pointer;
		float: left;
	}
	.dest .dest_middle .default{
		color: orange;
	}
	.dest .dest_bottom{
		width: 100%;
		height: 6rem;
	}
	.dest .dest_bottom ul{
		width: 100%;
		height: 50%;
		margin-top: 0.5rem;
	}
	.dest .dest_bottom ul li{
		width: 30%;
		height: 100%;
		margin-left: 2.8%;
		/* background: url(../../../assets/img/newpics/1.jpg); */
		background-size: 96% 100%;
		background-repeat: no-repeat;
		float: left;
		border-radius: 0.2rem;
		position: relative;
	}
	.dest .dest_bottom ul li p{
		font-size: 0.4rem;
		text-align: center;
		color: white;
	}
	.dest .dest_bottom ul li p:first-child{
		margin-top: 1.6rem;
		font-weight: bold;
		margin-bottom: 0.2rem;
	}
	.dest .dest_bottom ol{
		width: 95%;
		height: 45%;
		margin: 0 auto;
		margin-top: 0.3rem;
	}
	.dest .dest_bottom ol li{
		width: 30%;
		line-height: 65px;
		margin-left: 2%;
		text-align: center;
		font-size: 0.45rem;
		margin-top: 0.15rem;
		border: 1px solid #D4D4D4;
		border-radius: 0.2rem 0 0 0;
		float: left;
		position: relative;
	}
	.dest .dest_bottom ol li span{
		/* width: 55%; */
		padding-left: 0.2rem;
		padding-right: 0.2rem;
		line-height: 15px;
		font-size: 0.25rem;
		position: absolute;
		top: 0;
		left: 0;
		border-radius: 0.2rem 0 0.2rem 0;
		background-color: #E6C81A;
	}
</style>
